<template>
    <div>
        <mHeader></mHeader>
        <div class="main-con">
            <div class="left_main">
                <leftMenu />
            </div>
            <div class="rightMain">
                <!-- 用户 -->
                <div class="r_main">
                    <div class="user">
                        <img class="bgg" :src="info.bgimage" alt="">
                        <div class="left">
                            <div class="avatar">
                                <img :src="info.avatar" alt="">
                            </div>
                            <div class="info">
                                <p class="nane">{{ info.uname }}</p>
                                <div class="data">
                                    <div>
                                        关注 <span>{{ info.follow }}</span>
                                    </div>
                                    <span class="line"></span>
                                    <div>
                                        粉丝 <span>{{ info.fans }}</span>
                                    </div>
                                    <span class="line"></span>
                                    <div>
                                        获赞 <span>{{ info.likes }}</span>
                                    </div>
                                </div>
                                <div class="address">
                                    <div>主题号：{{ info.account }}</div>
                                    <span class="line"></span>
                                    <div>IP属地：{{ info.Ipcity }}</div>
                                </div>
                                <p class="sign">{{ info.signature }}</p>
                            </div>
                        </div>
                        <div class="right">
                            <div class="share" @click="openShare">
                                <span>分享主页</span>
                                <img src="@/assets/img/dot.png" alt="">
                            </div>
                            <div class="btn" v-if="info.is_mine != 1">
                                <button v-if="info.is_friends == 2" @click="makeFriend(1)">关注</button>
                                <button v-if="info.is_friends == 1" @click="makeFriend(2)">取消关注</button>
                                <button v-if="info.is_msg == 1" @click="dialogVisible = true">私信</button>
                            </div>
                        </div>
                    </div>
                    <div class="tabIn">
                        <div class="tab">
                            <!-- <span style="margin-right: 10px;">
                                知识仓【
                            </span> -->
                            <div v-for="(item, index) in tabList" :key="item.type"
                                @click="getTabtype(item.type, item.path)" style="position: relative;">
                                <span  class="fu" style="margin-right: 10px;" v-if="index == 1">知识仓<strong>【</strong></span>

                                <div style="position: relative;" :class="{ actives: item.path == path }">

                                    {{ item.name }} {{ item.nums }}
                                    <div class="botLine">
                                        <span :class="{ active: item.path == path }"></span>
                                    </div>
                                </div>
                                <span class="fu" style="position: absolute;right: -30px;" v-if="index == 3">】</span>


                            </div>
                        </div>
                        <div class="search">
                            <input type="text" placeholder="搜TA发布的作品" placeholder-class="pla" v-model="keyword"
                                @keyup.enter="goSearch">
                            <img src="@/assets/img/search.svg" alt="" @click="goSearch()" style="cursor: pointer;">
                        </div>
                    </div>
                    <div class="form_con">
                        <router-view @getList="getNewInfo"></router-view>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog :visible.sync="dialogVisible" width="700px">
            <span slot="title" class="dialog-header">
                <i style="color:#d41f19;margin-right: 12px;" class="iconfont">&#xe628;</i>发送私信
            </span>
            <el-form ref="form" label-width="6.25vw">
                <div class="select">
                    <el-form-item label="私信内容:" required>
                        <el-input type="textarea" v-model="remark" placeholder="请输入私信内容"></el-input>
                    </el-form-item>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="sendMsg">确 定</el-button>
            </span>
        </el-dialog>

        <ShareDia ref="shareDia" :info="shareInfo"></ShareDia>

    </div>
</template>
<script>
import leftMenu from '@/components/leftMenu.vue';
import ShareDia from "@/components/shareDia.vue"
import { baseUrl } from '@/apis/index'

export default {
    components: {
        leftMenu, ShareDia
    },
    data() {
        return {
            info: {},
            menuList: [],
            bgUrl: '',
            tabList: [],
            curType: 1,
            keyword: '',
            url: '',
            dialogVisible: false,
            remark: '',
            shareInfo: {},
        };
    },
    computed: {
        path() {
            return this.$route.path
        },
        uid() {
            return this.$route.query.id
        },
        mypath() {
            return this.$route.fullPath
        },
    },
    watch: {
        uid(n) {
            this.getInfo()
        }
    },
    mounted() {
        // let uid = this.$route.query.id

        this.getInfo()

    },

    methods: {
        // 打开分享弹窗并记录
        openShare() {
            let params = {
                id: this.uid,
                op: 4
            }
            this.$api.addShare(params).then(res => {
                let uid = res.data.data
                if (res.data.code == 1) {
                    if (uid) {
                        // 如果为自己的名片 则path后拼上uid
                        this.$router.push({
                            path: this.path,
                            query: {
                                id: uid,
                            }
                        })
                    }

                    const fullUrl = window.location.href;
                    this.shareInfo = {
                        title: this.info.uname + '的名片分享',
                        link: fullUrl,
                        img: baseUrl + 'home/base/qrcod?url=' + fullUrl
                    }

                    this.$refs.shareDia.open()
                    this.getInfo()
                }
            })
        },
        getNewInfo() {
            this.getInfo()

        },

        // 搜索相关作品
        goSearch() {
            let type = this.curType
            let list = this.tabList
            let keyword = this.keyword
            list.forEach(i => {
                if (type == i.type) {
                    this.url = i.path
                }
            })

            let old_word = this.$route.query.keyword
            if (old_word != keyword) {
                this.$router.push({
                    path: this.url,
                    query: {
                        keyword,
                        id: this.uid
                    }
                })

            }

        },

        // 私信
        sendMsg() {
            let params = {
                to_id: this.uid,
                content: this.remark
            }
            this.$api.sendMsg(params).then(res => {
                if (res.data.code == 1) {
                    this.$message({
                        type: 'success',
                        message: res.data.msg
                    });
                    this.dialogVisible = false
                    this.remark = ''
                }
            })
        },

        // 关注用户
        makeFriend(op) {
            let params = {
                to_id: this.uid,
                op
            }
            this.$api.makeFriend(params).then(res => {
                if (res.data.code == 1) {
                    this.$message.closeAll()

                    this.$message({
                        type: 'success',
                        message: res.data.msg
                    });
                    this.getInfo()
                }
            })
        },

        // 获取专栏详情
        getInfo() {
            let params = {
                user_id: this.uid
            }
            this.$api.getUInfo(params).then(res => {
                console.log(res)
                if (res.data.code == 1) {
                    this.info = res.data.data.info
                    this.tabList = res.data.data.tabs
                }
            })
        },
        getTabtype(t, url) {
            this.curType = t
            if (this.path != url) {
                this.$router.push({
                    path: url,
                    query: {
                        id: this.uid
                    }
                })
                this.keyword = ''
            }
        },
        onSubmit() {
            console.log('submit!', this.form);
        },
        goPage(url) {
            if (this.path != url) {
                this.$router.push(url)
            }
        }
    },
}
</script>
<style lang="scss" scoped>
.main-con {
    display: flex;

    .left_main {
        margin-right: 1.04rem;
    }
}

.rightMain {
    flex: 1;
    border-top: 0.05rem solid #E8E8E8;

    .top {
        padding: 1.1rem 1.04rem;
        height: 4.17rem;
        display: flex;
        align-items: center;
        background-color: #1068E7;
        width: 100%;

        strong {
            font-weight: bold;
            font-size: 1.50rem;
            color: #FFFFFF;
            line-height: 1.97rem;
            font-family: Microsoft YaHei;
        }

        span {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 1.15rem;
            color: #FFFFFF;
            margin-left: 1.35rem;
        }
    }

    .r_main {
        width: 100%;

        .user {
            width: 100%;
            height: 200px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            padding: 0 30px;
            overflow: hidden;
            background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));

            .bgg {
                position: absolute;
                width: 100%;
                height: auto;
                z-index: -1;

            }

            .left {
                display: flex;
                color: #fff;
                align-items: center;

                .avatar {
                    width: 150px;
                    height: 150px;
                    margin-right: 27px;
                    flex-shrink: 0;
                    border-radius: 50%;
                    overflow: hidden;

                    img {
                        object-fit: cover;
                        width: 100%;
                        height: 100%;
                    }
                }

                .info {
                    .nane {
                        font-weight: bold;
                        font-size: 30px;
                        color: #FFFFFF;
                        margin-bottom: 13px;
                    }

                    .data {
                        display: flex;
                        align-items: center;
                        margin-bottom: 13px;

                        .line {
                            height: 18px;
                            display: block;
                            width: 2px;
                            background-color: #fff;
                            margin: 0 18px;
                        }

                        >div {
                            font-weight: 400;
                            font-size: 18px;
                            color: #999999;

                            >span {
                                color: #FFFFFF;
                            }
                        }
                    }

                    .address {
                        display: flex;
                        align-items: center;
                        margin-bottom: 10px;
                        font-weight: 400;
                        font-size: 16px;
                        color: #999999;

                        .line {
                            margin: 0 18px;
                            display: block;
                            height: 16px;
                            width: 2px;
                            background-color: #999;
                        }
                    }

                    .sign {
                        font-weight: 400;
                        font-size: 16px;
                        color: #FFFFFF;
                    }
                }
            }

            .right {
                height: 100%;
                padding: 28px 0 38px;
                font-weight: 400;
                display: flex;
                justify-content: space-between;
                align-items: flex-end;
                flex-direction: column;
                font-size: 20px;
                color: #FFFFFF;

                .share {
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    img {
                        width: 28px;
                        height: auto;
                        margin-left: 11px;
                    }
                }

                .btn {
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    button {
                        cursor: pointer;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 120px;
                        height: 48px;
                        background: #F98951;
                        border-radius: 24px;
                        opacity: 0.9;
                        margin-left: 26px;
                        font-weight: 400;
                        font-size: 20px;
                        color: #FFFFFF;
                        border: none;

                        &:nth-child(2) {
                            background: #1068E7;
                        }
                    }
                }
            }
        }

        .tabIn {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 23px 0;
            background-color: #fff;
            position: sticky;
            top: 98px;
            z-index: 99;

            .tab {
                display: flex;
                align-items: center;

                >div {
                    display: flex;
                    align-items: center;
                    margin-right: 55px;
                    cursor: pointer;
                    position: relative;

                    .actives {
                        font-weight: bold;
                        color: #1068E7;
                    }

                    .botLine {
                        width: 100%;
                        height: 3px;
                        box-sizing: content-box;
                        position: relative;
                        top: calc(100% + 13px);
                        position: absolute;
                        left: 0;
                        right: 0;

                        >span {
                            position: absolute;
                            left: 0;
                            top: 0;
                            display: inline-block;
                            width: 0;
                            height: 3px;
                            background-color: #1068E7;
                            border-radius: 3px;
                        }

                        .active {
                            animation: expandWidth .5s forwards;
                        }

                        @keyframes expandWidth {
                            0% {
                                width: 0;
                            }

                            100% {
                                width: 100%;
                            }
                        }
                    }
                }
            }

            .search {
                margin-left: 4.4rem;
                position: relative;
                width: 280px;
                height: 48px;
                display: flex;
                align-items: center;

                img {
                    width: 23px;
                    height: 23px;
                    position: absolute;
                    top: calc(50% - 11px);
                    right: 11px;
                }

                input {
                    width: 280px;
                    height: 48px;
                    outline: none;
                    background: #F6F6F6;
                    border-radius: 1.25rem;
                    padding: 0 3rem 0 1.2rem;
                    box-sizing: border-box;
                    font-size: 0.83rem;
                    border: none;
                    border: 1px solid #F6F6F6;

                    &:focus {
                        border: 1px solid #1068E7;
                    }
                }

                .pla {
                    font-weight: 400;
                    font-size: 0.83rem;
                    color: #666666;
                }
            }
        }

        .form_con {
            min-height: 500px;
            // overflow-y: auto;
        }
    }
}

.dialog-header {
    font-weight: bold;
    font-size: 22px;
}

.dialog-footer {
    font-weight: bold;
    font-size: 22px;
    display: flex;
    justify-content: center;
    align-items: center;

    button {
        margin: 0 50px;
        width: 140px;
        height: 50px;
        font-size: 16px;
        line-height: 50px;
        padding: 0;
    }
}
@media screen and (max-width:768px) {
    .left_main{
        display: none;
    }
    .main-con{
        width: 100%;
    }
    .rightMain .r_main {
        .user{
        height: 150px;
        .left{
            .avatar{
                width: 80px;
                height: 80px;
                margin-right: 10px;
            }
            .info{
                .nane{
                    font-size: 16px;
                }
                .data{
                    .line{
                        height: 6px;
                        margin:0 8px;
                    }
                    font-size: 14px;
                    >div{
                        font-size: 14px;
                    }
                }
                .address{
                    font-size: 12px;
                }
            }
        }
        .right{
           .share{
            font-size: 14px;
            img{
                width: 15px;
                height: auto;
                margin-left: 5px;
            }
           } 
           .btn{
            flex-direction: column;
            button{
                margin-top: 10px;
                font-size: 12px;
                padding: 5px;
                width: 80px;
                height: 30px;
            }
           }
        }
        .bgg{
            height: 150px;
            img{
                height: 100%;
                object-fit: cover;
            }
        }
    }
    .tabIn{
        flex-direction: column-reverse;
        align-items: flex-start;
        .search{
            margin: 0;
            width: 100%;
            height:48px;
            padding: 10px;
            input{
                width: 100%;
                font-size: 12px;
                height: 28px;
                padding-right: 10px;
                line-height: 28px;
            }
            img{
                width: 15px;
                height: 15px;
                top:calc(50% - 7px);
                right: 15px;
            }
        }
        .tab{
            font-size: 14px;
            padding: 10px;
            display: flex;
            align-items: center;
            width: 100%;
            flex-wrap: wrap;
            >div{
                margin: 5px 8px 8px;
                &:first-child{
                    margin-left: 0;
                }
                &:last-child{
                    margin-right: 0;
                }
                >div{
                    white-space: nowrap;
                }
            }
            .fu{
                display: none;
            }
        }
    }
    }
}
</style>